<template>
	<el-drawer v-model="visible" size="100%" :show-close="false" :z-index="9999" @opened="opened">
		<template #header="{ close, titleId, titleClass }">
			<div :id="titleId" :class="titleClass">
				<el-button v-show="fileurl" type="primary" @click="downFile">下载</el-button>
			</div>
			<section style="display: flex; justify-content: flex-end" :style="{ width: btnWidth + 'px' }">
				<el-button class="btnReturn" @click="close">返回</el-button>
			</section>
		</template>
		<iframe :src="fileurl" style="width: 100%; height: 100%" frameborder="0"></iframe>
		<!-- <vue-office-pdf v-if="fileType == 'pdf'" :src="fileurl" style="height: 100%"></vue-office-pdf>
		<vue-office-docx v-if="fileType == 'docx'" :src="fileurl" style="height: 100%" />
		<vue-office-excel :v-if="fileType == 'xlsx'" :src="fileurl" style="height: 100%" />
		<div v-if="fileType == 'txt'" style="width: 100%; height: 100%; white-space: pre-wrap">
			{{ txtContent }}
		</div>
		<img v-if="isImg" :src="fileurl" alt="" style="width: 100%; height: 100%" /> -->
	</el-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useCrudFiles } from '@/hooks/indexFilesPdf'
import { addIncreaseDownload } from '@/api/standard-services/index'
// import VueOfficePdf from '@vue-office/pdf'
// import VueOfficeDocx from '@vue-office/docx'
// import '@vue-office/docx/lib/index.css'

// import VueOfficeExcel from '@vue-office/excel'
// import '@vue-office/excel/lib/index.css'

import axios from 'axios'
const emit = defineEmits(['downFile'])
const fileurl = ref('')
const visible = ref(false)
const fileType = ref('')
const fileName = ref('')

const btnWidth = ref('200')

const txtContent = ref('')

const isIframeVisible = ref(false)

const imgType = ref([
	'bmp',
	'jpg',
	'jpeg',
	'png',
	'tif',
	'gif',
	'pcx',
	'tga',
	'exif',
	'fpx',
	'svg',
	'psd',
	'cdr',
	'pcd',
	'dxf',
	'ufo',
	'eps',
	'ai',
	'raw',
	'WMF',
	'webp',
	'avif',
	'apng'
])

const isImg = ref(false)

const fileId = ref('')

const init = (url, type, name, id) => {
	txtContent.value = ''

	fileType.value = type
	fileName.value = name
	fileId.value = id
	visible.value = true
	isImg.value = false
	if (url) {
		isIframeVisible.value = true
		fileurl.value = url + '?t=' + new Date().getTime() + '#toolbar=0&view=FitH,top'

		// if (type == 'txt') {
		// 	axios.get(url, { responseType: 'text' }).then(res => {
		// 		txtContent.value = res.data
		// 	})
		// } else if (imgType.value.includes(type)) {
		// 	isImg.value = true
		// 	fileurl.value = window.URL.createObjectURL(url)
		// }
	}
}

const downFile = () => {
	downloadHandle(fileurl.value, fileName.value)

	if (fileId.value) {
		addIncreaseDownload(fileId.value).then(() => {
			emit('downFile')
		})
	}
}

const { downloadHandle } = useCrudFiles({})

const opened = () => {
	btnWidth.value = '200'
}

defineExpose({
	init,
	visible
})
</script>
<style lang="scss" scoped>
</style>